import React,{ Component } from 'react';
import "antd/dist/antd.css";
import { Input, Button, List, Checkbox } from 'antd';
import { changeInput, add_todo_item, delete_todo_item, check_box_handler, census_check_num, delete_completed } from './store/actionCreators';
import store from './store/';
class App extends Component {
    constructor(props){
        super(props);
        this.state = store.getState();
        this.handleInputChange = this.handleInputChange.bind(this);
        this.updateState = this.updateState.bind(this);
        this.addTodoItem = this.addTodoItem.bind(this);
        this.deleteChecked = this.deleteChecked.bind(this);
        store.subscribe(this.updateState)
    }
    updateState(){
        this.setState(store.getState());
    }
    handleInputChange(e){
        store.dispatch(changeInput(e.target.value));
    }
    addTodoItem(){
        store.dispatch(add_todo_item());
    }
    deleteTodoItem(index){
        store.dispatch(delete_todo_item(index));
        this.censucNum()
    }
    checkboxHandler(index){
        store.dispatch(check_box_handler(index));
        this.censucNum();
    }
    censucNum(){
        store.dispatch(census_check_num());
    }
    deleteChecked(){
        store.dispatch(delete_completed());
        this.censucNum();
    }
    render() {
        const { value, list, activeNum } = this.state;
        return <div style={{maringTop:'10px',marginLeft:'10px'}}>
           <Input value={value} onChange={this.handleInputChange} placeholder="todo info" style={{width:'300px',marginRight:'10px'}}/>
           <Button type="primary" onClick={this.addTodoItem}>submit</Button>
           <List
            style={{width:'300px',marginTop:'10px'}}
            bordered
            dataSource={list}
            renderItem={(item,index) => (<List.Item style={{position:'relative'}}><Checkbox checked={item.isCompleted} onChange={this.checkboxHandler.bind(this,index)} style={{marginRight:'10px'}}></Checkbox><div style={item.isCompleted ? {textDecoration:'line-through',color:'#ccc'} : {}}>{item.name}</div><div onClick={this.deleteTodoItem.bind(this,index)} style={{position:'absolute',right:'10px',top:'50%',transform:'translateY(-50%)',cursor:'pointer',width:'20px',heigth:'20px',border:'1px solid #ccc',borderRadius:'50%',textAlign:'center',lineHeight:'20px'}}>X</div></List.Item>)}
            />
            <div style={{width:'300px',height:'50px',display:'flex',justifyContent:'space-around',alignItems:'center',border:'1px solid #ccc',marginTop:'10px',borderRadius:'3px'}}>
                <span>{activeNum}item</span>
                <span onClick={this.deleteChecked} style={{cursor:'pointer'}}>delete completed</span>
            </div>
        </div>
    }
}
export default App;